<template>
    <div class="container">


        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="请输入标题">
                <el-input v-model="formInline.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="作者/标题">
                <el-input v-model="formInline.author" placeholder="请输入作者/编辑" />
            </el-form-item>



            <!-- 上传缩略图 -->
            <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>

            <!-- 富文本 -->

            <!-- <QuillEditor theme="snow" /> -->
            <!-- 此处注意写法v-model:content -->
            <QuillEditor ref="myQuillEditor" theme="snow" v-model:content="content" :options="data.editorOption"
                contentType="html" @update:content="setValue()" @change="onEditorChange()" />
            <!-- 使用自定义图片上传 -->
            <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />


            <el-form-item>
                <el-button type="primary" @click="onSubmit(formInline)">上传</el-button>
            </el-form-item>

        </el-form>


    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'


// 富文本
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

import { onMounted, toRaw, watch } from 'vue'



// 上传缩略图

const fileList = ref<UploadUserFile[]>([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },

])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}


import { reactive } from 'vue'

const formInline = reactive({
    // 标题
    title: '',
    author: '', //作者
    text: '', // 富文本内容
    onEditorChange: (text) => { // 当富文本发生变化函数
        // text
        formInline.text = text
    }
})

// 点击提交时
const onSubmit = (formInline) => {

    console.log(formInline.title)
    console.log(formInline.author)
    console.log(formInline.text)

}


// 富文本
const props = defineProps(['value'])
const emit = defineEmits(['updateValue'])
const content = ref('')
const myQuillEditor = ref()
// 通过watch监听回显，笔者这边使用v-model:content 不能正常回显
watch(() => props.value, (val) => {
    toRaw(myQuillEditor.value).setHTML(val)
}, { deep: true })
const fileBtn = ref()
const data = reactive({
    content: '',
    editorOption: {
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'font': [] }],
                [{ 'align': [] }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'header': 1 }, { 'header': 2 }],
                ['image'],
                [{ 'direction': 'rtl' }],
                [{ 'color': [] }, { 'background': [] }]
            ]
        },
        placeholder: '请输入内容...'
    }
})
const imgHandler = (state) => {
    if (state) {
        fileBtn.value.click()
    }
}
// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
const setValue = () => {
    const text = toRaw(myQuillEditor.value).getHTML()
    // console.log(text)
    // 将设置的值 传到定义表单的属性函数里
    formInline.onEditorChange(text)
}
const handleUpload = (e) => {
    const files = Array.prototype.slice.call(e.target.files)
    // console.log(files, "files")
    if (!files) {
        return
    }
    const formdata = new FormData()
    formdata.append('file', files[0])
    backsite.uploadFile(formdata)  // 此处使用服务端提供上传接口
        .then(res => {
            if (res.data.url) {
                const quill = toRaw(myQuillEditor.value).getQuill()
                const length = quill.getSelection().index
                quill.insertEmbed(length, 'image', res.data.url)
                quill.setSelection(length + 1)
            }
        })
}
// 初始化编辑器
onMounted(() => {
    const quill = toRaw(myQuillEditor.value).getQuill()
    if (myQuillEditor.value) {
        quill.getModule('toolbar').addHandler('image', imgHandler)
    }
})


</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    /* background: red; */
    backdrop-filter: blur(1px);
    z-index: 999;
    display: flex;
    justify-content: center;
    /* padding: 4%; */


}

.el-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;

    height: 100%;
    /* background-color: pink; */

}

/* 富文本选择区域 */
/deep/ .ql-toolbar {
    transition: .3s;
    width: 600px;
}

/deep/ .ql-picker-label {
    /* background-color: rgb(129, 194, 255); */
    color: red;
    transition: .3s;

}

/deep/ .ql-formats {
    background-color: rgb(129, 194, 255);

    color: red;
    transition: .3s;

}

/deep/ .ql-toolbar .ql-snow {
    background-color: rgb(129, 194, 255);
    transition: .3s;

    color: red;

}

/* 富文本文字 */
/deep/ .ql-editor {

    /* background-color: pink; */
    color: rgb(255, 255, 255);
}

/deep/ .ql-container {
    width: 600px;
    /* background-color: pink; */

}


.el-form-item {
    color: #fff;
    width: 460px;
}


:deep(.ql-editor) {
    /* min-height: 180px; */
    margin: 10px 0;
}

:deep(.ql-formats) {

    margin: 10px 0;
    transition: .3s;

    /* height: 21px;
    line-height: 21px; */
}
</style>


